<template>
    <BaseContent>
        <div class="row justify-content-md-center">
            <div class="col-9">
                <div class="card content_field">
                    <div class="card-body">
                        <div class="card-list-scrollable" style="max-height: 400px;">
                            <div v-for="message in message_list" :key="message.id">
                                <div class="card-body">
                                    <span><img :src="message.user_photo" alt="" class="user_pgoto"></span>
                                    <span class="user_nickname">{{ message.user_name }}</span>
                                    <span class="user_content">{{ message.content }}</span>
                                    <span class="submittime_me">{{ dayjs(message.submittime).format('YYYY-MM-DD HH:mm:ss') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mb-3">
                    <label for="exampleFormControlTextarea1" class="form-label">请输入内容</label>
                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" v-model="message_content"></textarea>
                    <button type="button" class="btn btn-success" @click="submit_a_message">发送</button>
                </div>
            </div>
        </div>
    </BaseContent>
</template>

<script>
import BaseContent from '@/components/BaseContent.vue';
import $ from 'jquery';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import { ref } from 'vue';
import dayjs from 'dayjs';
export default {
    name: "OrdinaryDialogueView",
    components: {
        BaseContent
    },
    setup() {
        const store = useStore();
        const route = useRoute();
        const message_studentid = parseInt(route.params.userid);
        const message_content = ref('');
        const message_list = ref([]);
        const formattedDate = dayjs().format('YYYY-MM-DD HH:mm:ss');
        $.ajax({
            url: "http://47.121.28.202:8000/settings/ordinarymessage/",
            type: "GET",
            headers: {
                'Authorization': "Bearer " + store.state.user.access,
            },
            success(resp) {
                console.log(store.state.user.id);
                for (let i of resp) {
                    if ((i.user_id === store.state.user.id && i.student_id === parseInt(message_studentid)) || (i.user_id === parseInt(message_studentid) && i.student_id === store.state.user.id)) {
                        message_list.value.push(i);
                    }
                }
            }
        })

        const submit_a_message = () => {
            $.ajax({
                url: "http://47.121.28.202:8000/settings/ordinarymessage/",
                type: "POST",
                headers: {
                    'Authorization': "Bearer " + store.state.user.access,
                },
                data: {
                    user_id: store.state.user.id,
                    student_id: message_studentid,
                    content: message_content.value,
                    submittime: formattedDate,
                    user_name: store.state.user.nickname,
                    user_photo: store.state.user.photo,
                },
                success(resp) {
                    if (resp.result === "success") {
                        message_list.value.push({
                            user_id: store.state.user.id,
                            student_id: message_studentid,
                            content: message_content.value,
                            submittime: formattedDate,
                            user_name: store.state.user.nickname,
                            user_photo: store.state.user.photo,
                        })
                        message_content.value = "";
                    }
                }
            })
        }

        return {
            submit_a_message,
            message_content,
            message_list,
            dayjs,
        }
    }
}
</script>

<style scoped>
.card-list-scrollable {
    overflow-y: auto;
    border-radius: 5px;
}
.mb-3 {
    position: sticky;
    bottom: 0;
    width: 100%;
}
button {
    margin-top: 10px;
    float: right;
}
.content_field {
    height: 450px;
}
.user_pgoto {
    width: 30px;
    margin-right: 10px;
}
.user_nickname {
    font-weight: bold;
    margin-right: 10px;
}
.submittime_me {
    float: right;
    position: relative;
    top: 8px;
    font-size: small;
}
.user_content {
    font-size: 14px;
}
</style>